<template>
  <div class="container">
    <div id="app"></div>
    <canvas id="deck-canvas"></canvas>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { ScatterplotLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';

/**
 * 创建 mapbox 底图，并使用 deck.gl 绘制图层后添加到 mapbox 当中，使用这种方式绘制的图层视觉效果会比后面跟一个 canvas 效果好
 */

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';

      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [-122.45, 37.78],
        zoom: 7,
      });

      this.map = map;
      window.map = map;

      // window.document.body.addEventListener('mousemove', (e) => {
      //   console.log('mousemove :>> ', e.x, e.y);
      // });

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });

      const scatterplotlayer = new MapboxLayer({
        id: 'scatterplotlayer',
        data: [{ position: [-122.45, 37.78], message: 'Hover over me' }],
        getPosition: (d) => d.position,
        getRadius: 10000,
        type: ScatterplotLayer,
        getFillColor: [255, 255, 0],
        // Enable picking
        pickable: true,
        onHover: (info, event) => {
          // 创建一个弹出框，并显示改点的信息，删除之前的弹出框，并重新创建一个新的弹出框

          const lastDom = document.getElementById('tooltip');
          if (lastDom) {
            lastDom.remove();
          }
          if (info.picked) {
            // TODO：如果已经有这个元素了，就不再创建了，直接修改left和top即可
            const tooltip = document.createElement('div');
            tooltip.id = 'tooltip';
            tooltip.innerHTML = info.object.message;
            tooltip.style.position = 'absolute';
            tooltip.style.zIndex = 999;
            tooltip.style.left = `${info.x + 10}px`;
            tooltip.style.top = `${info.y + 10}px`;
            tooltip.style.color = `#000`;
            window.document.body.appendChild(tooltip);
          }

          console.log('info.object :>> ', info.object);
          console.log('info :>> ', info);
          console.log('event :>> ', event);
        },
      });

      // console.log('deck :>> ', deck);

      map.on('load', function () {
        map.addLayer(scatterplotlayer);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}

#tooltip {
  width: 200px;
  height: 300px;
  background-color: aqua;
}
</style>
